<template>
	<view class="container">
		<h1>待办事项管理</h1>
		
		<!-- 添加新待办事项 -->
		<view class="add-section">
			<input 
				type="text" 
				v-model="newTitle" 
				placeholder="请输入待办事项"
				class="input-field"
				@confirm="addTodos"
			/>
			<button @click="addTodos" class="add-btn">添加</button>
		</view>
		
		<!-- 待办事项列表 -->
		<view class="todos-list">
			<view v-for="(item, index) in todos" :key="item.id" class="todo-item">
				<!-- 正常显示模式 -->
				<view v-if="editingId !== item.id" class="todo-display">
					<checkbox 
						:checked="item.completed" 
						@change="toggleComplete(item)"
						class="checkbox"
					></checkbox>
					<text 
						:class="['todo-text', { 'completed': item.completed }]"
						@click="toggleComplete(item)"
					>{{ item.title }}</text>
					<view class="action-buttons">
						<button @click="startEdit(item)" class="edit-btn">编辑</button>
						<button @click="deleteTodo(item.id)" class="delete-btn">删除</button>
					</view>
				</view>
				
				<!-- 编辑模式 -->
				<view v-else class="todo-edit">
					<input 
						type="text" 
						v-model="editTitle" 
						class="edit-input"
						@confirm="saveEdit(item.id)"
					/>
					<view class="edit-buttons">
						<button @click="saveEdit(item.id)" class="save-btn">保存</button>
						<button @click="cancelEdit" class="cancel-btn">取消</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态提示 -->
		<view v-if="todos.length === 0" class="empty-state">
			<text>暂无待办事项，快来添加一个吧！</text>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';

// 响应式数据定义
const newTitle = ref("") // 新增待办事项的标题
const todos = ref([]) // 待办事项列表
const editingId = ref(null) // 当前正在编辑的待办事项ID
const editTitle = ref("") // 编辑时的临时标题

/**
 * 获取所有待办事项
 */
const getAllTodos = () => {
	uni.request({
		url: "http://localhost:3000/todos",
		method: "GET",
		success: res => {
			console.log('获取待办事项列表:', res.data);
			todos.value = res.data || [];
		},
		fail: err => {
			console.error('获取待办事项失败:', err);
			uni.showToast({
				title: '获取数据失败',
				icon: 'error'
			});
		}
	})
}

/**
 * 添加新的待办事项
 */
const addTodos = () => {
	if (!newTitle.value.trim()) {
		uni.showToast({
			title: '请输入待办事项内容',
			icon: 'none'
		});
		return;
	}
	
	const date = new Date().getTime();
	uni.request({
		url: "http://localhost:3000/todos",
		method: "POST",
		data: {
			id: date,
			title: newTitle.value.trim(),
			completed: false,
		},
		success: res => {
			console.log('添加待办事项成功:', res.data);
			newTitle.value = ""; // 清空输入框
			getAllTodos(); // 重新获取列表
			uni.showToast({
				title: '添加成功',
				icon: 'success'
			});
		},
		fail: err => {
			console.error('添加待办事项失败:', err);
			uni.showToast({
				title: '添加失败',
				icon: 'error'
			});
		}
	})
}

/**
 * 开始编辑待办事项
 * @param {Object} item 待办事项对象
 */
const startEdit = (item) => {
	editingId.value = item.id;
	editTitle.value = item.title;
}

/**
 * 取消编辑
 */
const cancelEdit = () => {
	editingId.value = null;
	editTitle.value = "";
}

/**
 * 保存编辑的待办事项
 * @param {Number} id 待办事项ID
 */
const saveEdit = (id) => {
	if (!editTitle.value.trim()) {
		uni.showToast({
			title: '请输入待办事项内容',
			icon: 'none'
		});
		return;
	}
	
	uni.request({
		url: `http://localhost:3000/todos/${id}`,
		method: "PATCH",
		data: {
			title: editTitle.value.trim()
		},
		success: res => {
			console.log('编辑待办事项成功:', res.data);
			cancelEdit(); // 退出编辑模式
			getAllTodos(); // 重新获取列表
			uni.showToast({
				title: '修改成功',
				icon: 'success'
			});
		},
		fail: err => {
			console.error('编辑待办事项失败:', err);
			uni.showToast({
				title: '修改失败',
				icon: 'error'
			});
		}
	})
}

/**
 * 删除待办事项
 * @param {Number} id 待办事项ID
 */
const deleteTodo = (id) => {
	uni.showModal({
		title: '确认删除',
		content: '确定要删除这个待办事项吗？',
		success: (res) => {
			if (res.confirm) {
				uni.request({
					url: `http://localhost:3000/todos/${id}`,
					method: "DELETE",
					success: res => {
						console.log('删除待办事项成功:', res.data);
						getAllTodos(); // 重新获取列表
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
					},
					fail: err => {
						console.error('删除待办事项失败:', err);
						uni.showToast({
							title: '删除失败',
							icon: 'error'
						});
					}
				})
			}
		}
	})
}

/**
 * 切换待办事项完成状态
 * @param {Object} item 待办事项对象
 */
const toggleComplete = (item) => {
	uni.request({
		url: `http://localhost:3000/todos/${item.id}`,
		method: "PATCH",
		data: {
			completed: !item.completed
		},
		success: res => {
			console.log('切换完成状态成功:', res.data);
			getAllTodos(); // 重新获取列表
		},
		fail: err => {
			console.error('切换完成状态失败:', err);
			uni.showToast({
				title: '操作失败',
				icon: 'error'
			});
		}
	})
}

// 组件挂载时获取待办事项列表
onMounted(() => {
	getAllTodos();
})
</script>

<style scoped>
.container {
	padding: 20px;
	background-color: #f5f5f5;
	min-height: 100vh;
}

h1 {
	text-align: center;
	color: #333;
	margin-bottom: 30px;
	font-size: 24px;
}

.add-section {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	background: white;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.input-field {
	flex: 1;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	margin-right: 10px;
	font-size: 16px;
}

.add-btn {
	padding: 10px 20px;
	background-color: #007aff;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 16px;
}

.todos-list {
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	overflow: hidden;
}

.todo-item {
	padding: 15px;
	border-bottom: 1px solid #eee;
}

.todo-item:last-child {
	border-bottom: none;
}

.todo-display {
	display: flex;
	align-items: center;
}

.checkbox {
	margin-right: 10px;
}

.todo-text {
	flex: 1;
	font-size: 16px;
	color: #333;
	cursor: pointer;
}

.todo-text.completed {
	text-decoration: line-through;
	color: #999;
}

.action-buttons {
	display: flex;
	gap: 10px;
}

.edit-btn {
	padding: 5px 10px;
	background-color: #ff9500;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 14px;
}

.delete-btn {
	padding: 5px 10px;
	background-color: #ff3b30;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 14px;
}

.todo-edit {
	display: flex;
	align-items: center;
	gap: 10px;
}

.edit-input {
	flex: 1;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 16px;
}

.edit-buttons {
	display: flex;
	gap: 10px;
}

.save-btn {
	padding: 5px 10px;
	background-color: #34c759;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 14px;
}

.cancel-btn {
	padding: 5px 10px;
	background-color: #8e8e93;
	color: white;
	border: none;
	border-radius: 4px;
	font-size: 14px;
}

.empty-state {
	text-align: center;
	padding: 40px 20px;
	color: #999;
	font-size: 16px;
	background: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
